<template>
  <div class="article-list" ref="articleList">
    <van-pull-refresh
      :success-duration="1500"
      success-text="刷新成功"
      v-model="isRefreshLoading"
      @refresh="onRefresh"
    >
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
    >
   <article-item
    v-for="(article, index) in list" 
    :key="index" 
    :article="article"
    />
      <!-- <van-cell
        v-for="(article, index) in list"
        :key="index"
        :title="article.title"
      /> -->
    </van-list>
  </van-pull-refresh>
  </div>
</template>
  
  <script>
import { getArticles } from "@/api/article";
import articleItem from './article-item';
import { throttle } from 'lodash'
export default {
  name: "ArticleList",
  components: { articleItem },
  props: {
    channel: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: null,
      error:false,
      isRefreshLoading:false // 是否下拉刷新中
    };
  },
  methods: {
    async onLoad () {
      // onLoad中要做的几件事情
      // 1. 利用分页参数等调用接口获取列表数据
      const { data } = await getArticles({
        channel_id: this.channel.id, // 频道 id
        timestamp: this.timestamp || Date.now()
      })
      // 2. 把拿到的数据追加到数组的尾部
      this.list.push(...data.results)
      // 3. 把loading是否加载中设置为false
      this.loading = false
      // 4. 判断还有没有下一页的数据
      //    如果返回的pre_timestamp属性为null, 代表已经是最后一页数据
      if (data.pre_timestamp) {
        // 6. 如果还有下一页数据就修改
        //    分页参数：让下一次调接口的时候获取的时下一页的数据
        this.timestamp = data.pre_timestamp
      } else {
        // 5. 如果没有下一页的数据就把finished设置为true：
        // 表示所有数据已加载完毕
        this.finished = true
      }
    },
    async onRefresh() {
      this.loading = true
      this.list  = [] 
      this.finished = false
      this.timestamp = null

      await this.onLoad()
      this.isRefreshLoading = false
    }
  },
  mounted() {
    // 在挂载后立即会执行的钩子函数mounted，中来进行处理
    //  1.监听 article-list 这个盒子的滚动条滚动的事件
    this.$refs.articleList.addEventListener('scroll', throttle(function(){
      // 2.拿到滚动条滚动到的位置 原生属性
      console.log(this.scrollTop);
      // 3.把滚动条滚动到的位置记录到了 DOM元素自定义的属性 top中
      this.setAttribute('top',this.scrollTop)
    },1000))
  },
  activated(){
    // 组件被激活的钩子函数
    console.log('文章列表组件被激活了')
    //1，当文章列表组件被重新激活的，拿到之前记录的滚动条滚动的位置
    const top = this.$refs.articleList.getAttribute('top')
    // 2.操作DOM让滚动条滚动到指定的位置
    this.$refs.articleList.scrollTop = top
  }

  }
</script>
  
  <style lang="less" scoped>
.article-list {
  margin-top: 88px;
  height: calc(100vh - 188px);
  overflow-y: auto;
}
</style>